<template>
  <el-container style="min-height: 100vh">
    <!-- 左侧 -->
    <left-component></left-component>
    <el-container style="flex-direction: column;">
      <!-- 头部 -->
      <header-component ref="child"></header-component>
      <el-main>
        <!--下面这个div盒子是搜索框和搜索按钮 -->
        <!-- <div style="margin: 10px 0">
          <el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search"></el-input>
            <el-button class="ml-5" type="primary">搜索</el-button>
        </div> -->

        <!--  下面这个div盒子是新增、批量删除、导入导出按钮的  -->
        <div class="pageTitleWrap">
          <div class="pageTitle">用户列表</div>
          <el-button type="primary" @click="openhandle">新增用户</el-button>
        </div>

        <el-table :data="tableData" border stripe: header-cell-class-name="headerBg">
          <el-table-column prop="name" label="账户名称" width="240" align="center">
          </el-table-column>
          <el-table-column prop="userStatusEnum" label="账户状态" width="240" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.userStatusEnum==='UNAUTHORIZED'">未授权</span>
              <span v-else>已授权</span>
            </template>
          </el-table-column>
          <!-- 表格里面添加编辑和删除的按钮  -->
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button v-if="scope.row.userStatusEnum==='UNAUTHORIZED'" type="warning" @click="goShouQuan(scope.row)">去授权</el-button>
              <!-- <el-button v-if="scope.row.userStatusEnum!=='UNAUTHORIZED'" type="success">已授权</el-button> -->
            </template>
          </el-table-column>


        </el-table>
        <!--下边这个div盒子是添加进来可以分页的代码 -->
        <div style="padding: 10px 0">
          <el-pagination :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" :current-page="current" layout="total, sizes, prev, pager, next" :total="total" @size-change="pageSizeChange"  @current-change="handleCurrentChange"></el-pagination>
        </div>
      </el-main>
    </el-container>
    <!-- 新增用户 -->
    <el-dialog title="新增用户" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <div class="tanTitle">新增用户之后,需要再boss进行授权才可以使用。</div>
        <el-form-item label="用户名:" :label-width="formLabelWidth">
          <el-input v-model="form.accountName" placeholder="请输入用户名称" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveBtn">保 存</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import {
  getCurrentUserApi, //获取当前用户
  bossUserListApi, //bossUser列表
  bossUserAddApi, //添加boss账号
  bossUserAuthorizeApi //授权
} from "@/api/api";
// @ is an alias to /src
import HeaderComponent from '@/components/header.vue'
import LeftComponent from '@/components/left.vue'

export default {
  name: 'userList',
  components: {
    'header-component': HeaderComponent,
    'left-component': LeftComponent
  },
  data() {
    return {
      tableData: [],
      headerBg: 'headerBg',
      dialogFormVisible: false,
      userInfo:{},//用户信息
      current: 1,//当前页
      pageSize: 10,//分页大小
      total:0,//总共多少
      form: {
        accountName: ''
      },
      formLabelWidth: '80px'
    }
  },
  mounted: function () {
    localStorage.setItem('key','1-1')
    console.log('一进入页面，就获取当前用户')
    this.getCurrentUserFun() //获取当前用户
    this.bossUserListFun() //bossUser列表
  },
  methods: {
    // 获取当前用户
    getCurrentUserFun() {
      let that = this
      getCurrentUserApi().then(res => {
        console.log('获取当前用户结果')
        console.log(res)
        if (res.success) {
          console.log('存当前用户信息')
          localStorage.setItem('userInfo',JSON.stringify(res.data))
          this.userInfo = res.data
          this.$refs.child.updataUserInfo();
        } else {
          setTimeout(function () {
            that.$router.push({ path: '/login' })
          }, 1000)
        }
      })
    },
    // 获取bossUser列表
    bossUserListFun() {
      let that = this
      let param = {
        current: this.current,//当前页
        pageSize: this.pageSize //分页大小
      }
      bossUserListApi(param).then(res => {
        console.log('获取bossUser列表结果')
        console.log(res)
        this.total = res.total
        this.tableData = res.data
      })
    },

    // pageSize 改变时会触发
    pageSizeChange(val){
      this.pageSize = val
      this.current = 1
      this.bossUserListFun()
    },
    // currentPage 改变时会触发
    handleCurrentChange(val){
      this.current = val
      this.bossUserListFun()
    },

    // 点击新增用户-弹出弹出
    openhandle(){
      this.form.accountName = ''
      this.dialogFormVisible = true
    },
    // 新增用户-点击保存
    saveBtn() {
      console.log('新增用户-点击保存')
      if (this.form.accountName.trim() === '') {
        this.$message({
          message: '用户名不能为空',
          type: 'warning'
        });
        return
      } else {
        bossUserAddApi(this.form).then(res => {
          console.log('保存结果')
          console.log(res)
          if (res.success) {
            // this.$router.push({ path: '/userlist' })
            this.$message({
              message: '添加成功',
              type: 'success'
            });
            this.current = 1
            this.dialogFormVisible = false
            this.bossUserListFun(); //获取bossUser列表
          } else {
            this.$message.error(res.errorMessage);
            this.$router.push({ path: '/login' })
          }
        })
      }
    },
    // 点击-去授权
    goShouQuan(item){
      console.log('点击-去授权')
      console.log(item)
      console.log(item.name)
      let param = {
        accountName:item.name,
        id:item.bossId
      }
      bossUserAuthorizeApi(param).then(res=>{
        console.log('去授权--结果')
        console.log(res)
      })
    }
  }
}
</script>

<!--顶部的横栏颜色定义-->
<style>
.headerBg {
  background: #ccc !important;
}

.el-menu-item-group__title {
  padding: 0 0 0 0;
}
</style>